import * as React from 'react'
import classnames from "classnames";
import { Dispatch } from 'redux'
import { connect } from 'react-redux'
import { RootState } from '@/store/index'
import styles from './index.less'

export interface iProps {
  wrapperMTop?: number,
  wrapperMLeft?: number,
  width: number,
  height: number,
  bgImg?: string,
  children?: React.ReactChild
}
const { useEffect } = React;
const BoxWrapper: React.FC<iProps> = (props: iProps) => {
  const { width = 0, height = 0, bgImg = '', wrapperMTop = 0 } = props;

  return (
    <div
      className={
        classnames({
          [styles.wrapper]: true,
          [styles[`m-${wrapperMTop}`]]: true,
          [styles[`w-${width}`]]: true,
          [styles[`h-${height}`]]: true
        })
      }
      style={{
        backgroundImage: `url('${bgImg}')`,
      }}
    >
      {props.children}
    </div >
  )
}

const mapStateToProps = (state: RootState) => state
const mapDispatchToProps = (dispatch: Dispatch) => ({})

export default connect(mapStateToProps, mapDispatchToProps)(BoxWrapper)
